import { reactive, onMounted, defineComponent, toRefs, PropType, watch, defineEmits } from 'vue'
import ZlrtTable from '@/components/zlrt-table/table.vue'
import goodsApi from '@/api/inwarehouse/goods-api'

interface Props {
  skuName?: string,
  specification?: string,
  barCode?: string,
  dialogVisible: boolean
}

// const emits = defineEmits(['closeDialog'])
export default defineComponent({
  components: {
    ZlrtTable
  },
  props: {
    searchObj: {
      type: Object as PropType<Props>,
      default: () => {
        return {}
      }
    }
  },
  emits: {
    closeDialog: null,
    changedGood: null
  },
  setup(props, { emit }) {
    const { searchObj } = toRefs(props);

    const ctx = reactive({
      data: [],
      columns: [
        { prop: 'skuName', label: '物料名称' },
        { prop: 'barCode', label: '物料编码', width: 120 },
        { prop: 'specification', label: '规格型号', width: 200 },
        // { prop: 'number', label: '数量' },
        { prop: 'operation', label: '操作', slot: true, width: 100 },
      ],
      other: {
        showEdit(row) {
          emit('changedGood', row);
        }
      }
    })

    const loadData = async (obj) => {
      const params = {
        current: 1,
        size: 20,
        otherFilter: { skuName: obj.skuName.trim() }
      }
      if(obj.barCode) {
        params['filter'] = { barCode: obj.barCode.trim() }
      }
      const res = await goodsApi.list(params)
      ctx.data = res.data.records
    }

    watch(searchObj,
      (val) => {
        ctx.data = [];
        if(val['skuName']) {
          loadData(val)
        }
      },
      {deep: true}
    )

    const closeDialog = () => {
      emit('closeDialog')
    }

    const data = reactive({
      ctx,
      closeDialog
    })

    return {
      ...toRefs(data)
    }
  }
})
